<template>
  <view>
    <my-header bgColor="bg-white" :isBack="true">
      <block slot="content">职务</block>
    </my-header>
    <view class="page-content" :style="{ height: this.ContentArea + 'px' }">
      <view class="search-content">
        <view class="page-search">
          <view class="search">
            <view class="search-left">
              <image src="@/static/images/search.png" mode="aspectFit" />
            </view>
            <input
              class="search-center"
              type="text"
              placeholder="请输入职务名称"
              placeholder-class="search-placeholder"
              v-model="searchValue"
              @blur="getList"
            />
          </view>
        </view>
      </view>
      <view class="content">
        <scroll-view
          class="scroll-content"
          :scroll-y="true"
          :refresher-enabled="true"
          :refresher-triggered="refreshing"
          @refresherrefresh="onRefresh"
          :refresher-background="'#F9F9F9'"
          @scrolltolower="onEndReached"
        >
          <view class="duties-content">
            <view
              v-for="item in dataList"
              :key="item.id"
              class="duties-item"
              @click="editClick(item)"
            >
              <view class="duties-item-header">
                <image
                  :src="dutiesPng"
                  mode="aspectFit"
                  class="duties-item-header-image"
                />
                <view class="duties-item-header-title">{{ item.title }}</view>
              </view>
              <view class="duties-item-content">
                <view class="duties-item-content-line">
                  <view class="duties-item-content-line-label">上级部门:</view>
                  <view class="duties-item-content-line-content">{{
                    item.parentPath
                  }}</view>
                </view>
                <view class="duties-item-content-line">
                  <view class="duties-item-content-line-label">机构类型:</view>
                  <view class="duties-item-content-line-content">{{
                    getOrgCategoryLabel(item.orgCategory)
                  }}</view>
                </view>
                <view class="duties-item-content-line">
                  <view class="duties-item-content-line-label">职务类型:</view>
                  <view class="duties-item-content-line-content">{{
                    getPostTypeLabel(item.postType)
                  }}</view>
                </view>
                <view class="duties-item-content-line">
                  <view class="duties-item-content-line-label">计费标准:</view>
                  <view class="duties-item-content-line-content">{{
                    getFreightBasisLabel(item.freightBasis)
                  }}</view>
                </view>
                <view class="duties-item-content-line">
                  <view class="duties-item-content-line-label"
                    >员工人数上限:</view
                  >
                  <view class="duties-item-content-line-content">{{
                    item.demandWorker
                  }}</view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import myHeader from "../../components/my-header/my-header.vue";
import dutiesPng from "@/static/duties.png";
import UniPopup from "../accessRecords/componentCopy/uni-popup/uni-popup.vue";
import { createNamespacedHelpers } from "vuex";

const { mapActions } = createNamespacedHelpers("duties");

const orgCategoryList = [
  {
    label: "公司",
    value: "1",
  },
  {
    label: "部门",
    value: "2",
  },
  {
    label: "岗位",
    value: "3",
  },
  {
    label: "子部门",
    value: "4",
  },
  {
    label: "车间",
    value: "5",
  },
  {
    label: "班次",
    value: "6",
  },
  {
    label: "大类",
    value: "7",
  },
];

export default {
  components: { UniPopup, "my-header": myHeader },
  data() {
    return {
      searchValue: "",
      refreshing: false,
      sourceDataList: [],
      dataList: [],
      dutiesPng,
      pageNo: 1,
      pageSize: 20,
      total: 0,
      postTypeList: [],
      freightBasisList: [],
    };
  },
  computed: {
    getOrgCategoryLabel() {
      return (orgCategory) => {
        return orgCategoryList.find((item) => item.value === orgCategory)
          ?.label;
      };
    },
    getPostTypeLabel() {
      return (postType) => {
        return this.postTypeList.find((item) => item.value === postType)?.title;
      };
    },
    getFreightBasisLabel() {
      return (freightBasisList) => {
        return this.freightBasisList.find(
          (item) => item.value === freightBasisList
        )?.title;
      };
    },
  },
  mounted() {
    this.getList();
    this.getDictOptions();
  },
  methods: {
    ...mapActions(["setEditData"]),
    getLastLevelNodes(tree) {
      if (!tree || !tree.length) return [];

      const stack = tree.map((item) => ({ node: item, path: [] }));
      const lastLevelNodes = [];

      while (stack.length > 0) {
        const { node, path } = stack.pop();
        if (node.isLeaf) {
          const parentPath = path.map((item) => item.title).join(" ");
          lastLevelNodes.push({ ...node, parentPath });
        } else if (node.children && node.children.length > 0) {
          node.children.forEach((item) => {
            stack.push({ node: item, path: [...path, node] });
          });
        }
      }

      return lastLevelNodes;
    },
    getList(refresh = false) {
      if (!refresh) {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
      }
      this.$http
        .get("/sys/sysDepart/queryTreeListTileChangeTree", {
          params: {
            company: uni.getStorageSync("Auth_Company_Id"),
            params: this.searchValue,
          },
        })
        .then((res) => {
          const data = res.data;
          if (data.success) {
            const result = data?.result || {};
            const list = this.getLastLevelNodes(result?.tree || []);
            this.sourceDataList = list;
            this.dataList = list.slice(0, this.pageSize);
            this.total = list.length;
            this.pageNo = 1;
          } else {
            this.$tip.toast(data?.message || "");
          }
        })
        .finally(() => {
          this.refreshing = false;
          if (!refresh) {
            uni.hideLoading();
          }
        });
    },
    onRefresh() {
      this.refreshing = true;
      this.pageNo = 1;
      this.getList(true);
    },
    onEndReached() {
      if (this.pageNo * this.pageSize < this.total) {
        this.dataList = this.dataList.concat(
          this.sourceDataList.slice(
            this.pageNo * this.pageSize,
            (this.pageNo + 1) * this.pageSize
          )
        );
        this.pageNo++;
      }
    },
    getDictOptions() {
      this.$http.get("/sys/dict/getDictItems/post_type", {}).then((res) => {
        const data = res?.data;
        if (data.success) {
          this.postTypeList = data?.result ?? [];
        }
      });
      this.$http.get("/sys/dict/getDictItems/freight_basis", {}).then((res) => {
        const data = res?.data;
        if (data.success) {
          this.freightBasisList = data?.result ?? [];
        }
      });
    },
    editClick(item) {
      this.setEditData(item);
      uni.navigateTo({
        url: "/pages/duties/detail/index",
      })
    },
  },
};
</script>

<style scoped lang="scss">
page {
  background: #ffffff;
}

.page-content {
  background: #ffffff;
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;
    padding: 15px 17px 0;
    background: #f9f9f9;
    border-radius: 32px 32px 0 0;
    .scroll-content {
      height: 100%;
    }
  }
}

.page-search {
  padding-left: 34rpx;
  margin-bottom: 12rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.search {
  width: 688rpx;
  height: 86rpx;
  background-color: rgba(249, 249, 249, 1);
  border-radius: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 24rpx;
  padding-right: 24rpx;

  .search-left {
    width: 28rpx;
    height: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-center {
    margin-left: 22rpx;
  }

  .search-placeholder {
    font-size: 28rpx;
    font-weight: 400;
    color: #7c7c7c;
  }
}

.duties-content {
  display: flex;
  flex-wrap: wrap;
  gap: 19px 20px;
}

.duties-item {
  background: #ffffff;
  flex: 0 0 calc(50% - 10px);
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  box-sizing: border-box;

  .duties-item-header {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 2px 5px 5px;
    align-items: center;
    justify-content: center;

    &-image {
      width: 39px;
      height: 39px;
      margin-bottom: 3px;
    }

    &-title {
      font-weight: bold;
      font-size: 14px;
      color: #000000;
      line-height: 22px;
    }
  }

  .duties-item-content {
    background: #f6f6f6;
    box-sizing: border-box;
    padding: 5px 7px 7px;

    &-line {
      font-size: 10px;
      color: #2d2929;
      line-height: 12px;
      display: flex;
      margin-bottom: 7px;

      &-label {
        flex: 0 0 70px;
      }

      &-content {
        color: #000000;
      }
    }
  }
}
</style>
